<template>
  <teleport v-if="!isDestory" to="body">
    <div class="circle-wrapper" :style="circleStyle">
      <div class="circle circle1" :style="circleOneStyle">
      <div class="circle circle2" :style="circleTwoStyle"></div>
    </div>
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
export default defineComponent({
  name: "Circle",
  props: {
    isDestory: {
      type: Boolean,
      default: false,
    },
    left: {
      type: String,
      default: "0px",
    },
    top: {
      type: String,
      default: "0px",
    },
    color: {
      type: String,
      default: "#22c1b0",
    },
  },
  setup(props) {
    const circleStyle = computed(() => ({ left: props.left, top: props.top }));
    const circleOneStyle = computed(() => ({ backgroundColor: props.color }));
    const circleTwoStyle = computed(() => ({ border: `2px solid ${props.color}` }));
    return { circleStyle, circleOneStyle, circleTwoStyle };
  }
});
</script>

<style scoped>
.circle-wrapper {
  position: absolute;
  z-index: 2;
}
.circle {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle1 {
  width: 10px;
  height: 10px;
  position: relative;
  animation: 1s ease-out ripple1 infinite;
}
.circle2 {
  position: absolute;
  animation: 1s ease-out ripple infinite;
}
@keyframes ripple {
  0% {
    opacity: 0.5;
    transform: scale(1.1);
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes ripple1 {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}
</style>
